<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main"/>
    <title>Upload Images</title>
    <g:javascript library="jquery"/>

    <script>
        // JavaScript Document
        $(document).ready(function() {
            $("#inputNodes").click(function(event) {
                var $tgt = $(event.target);
                if ($tgt.is("a")) {
                    var number = $("#inputNodes input").length;
                    $("#inputNodes").append("<input type=\"file\" class=\'uploadImage\' name=\"images[" + number + "]\"/>");
                    $("#inputNodes").append("<a href=\"javascript://\" class=\"addButton\">Add more images</a>");
                }
            });
        });
    </script>

</head>
<body>
<div class="upload">
    <g:if test="${flash.message}">
        <div class="message">${flash.message}</div>
    </g:if>
    <g:hasErrors bean="${cmd}">
        <div class="errors">
            <g:renderErrors bean="${cmd}" as="list"/>
        </div>
    </g:hasErrors>
    <g:hasErrors bean="${cmd.item}">
        <div class="errors">
            <g:renderErrors bean="${cmd.item}" as="list"/>
        </div>
    </g:hasErrors>
    <g:uploadForm name="myUpload">
        <input type="hidden" name="item.id" value="${cmd.item?.id}"/>
        <input type="hidden" name="item.version" value="${cmd.item?.version}"/>
        <table>
            <tbody>
            <tr class="prop">
                <td valign="top" class="name">
                    <label for="item.title">Title:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: cmd?.item, field: 'title', 'errors')}">
                    <input type="text" class="textField"  id="item.title" name="item.title" value="${fieldValue(bean: cmd.item, field: 'title')}"/>
                </td>
            </tr>
            <tr class="prop">
                <td valign="top" class="name">
                    <label for="item.amount">Amount:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: cmd.item, field: 'amount', 'errors')}">
                    <input type="text" class="textField"  id="item.amount" name="item.amount" value="${fieldValue(bean: cmd.item, field: 'amount')}"/>
                </td>
            </tr>
            <tr class="prop">
                <td valign="top" class="name">
                    <label for="item.description">Description:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: cmd.item, field: 'description', 'errors')}">
                    <textarea rows="5" cols="40" id="item.description" name="item.description">${fieldValue(bean: cmd.item, field: 'description')}</textarea>
                </td>
            </tr>
            <tr class="prop">
                <td valign="top" class="name">
                    <label for="category.category">Category:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: cmd.category, field: 'category', 'errors')}">
                    <input type="text" class="textField"  id="category.category" name="category.category" value="${fieldValue(bean: cmd.category, field: 'category')}"/>
                </td>
            </tr>
            </tbody>
        </table>

        <div id="inputNodes">
            <input type="file" class='uploadImage' name="images[0]"/><a href="javascript://" class="addButton">Add more images</a>
        </div>

        <div class="uploadButtons">
            <g:actionSubmit value="Upload and add More" action="upload"/>
            <g:actionSubmit value="Upload" action="uploadAndShowItems"/>
        </div>
    </g:uploadForm>
</div>
</body>
</html>